<script setup lang="ts">
import { reactive, ref } from 'vue';
import {
  Breadcrumb,
  BreadcrumbItem,
  Button,
  DatePicker,
  Switch,
  Table,
} from 'ant-design-vue';
import dayjs from 'dayjs';
import { Download, Printer, RefreshCw } from 'lucide-vue-next';

interface BalanceRecord {
  key: string;
  subjectCode: string;
  subjectName: string;
  currentCredit: null | number;
  currentDebit: null | number;
  openingCredit: null | number;
  openingDebit: null | number;
  isTotal?: boolean;
}

interface QueryForm {
  endPeriod: dayjs.Dayjs | null;
  showOnlyFirstLevel: boolean;
  showYearAccumulated: boolean;
  startPeriod: dayjs.Dayjs | null;
}

// 查询表单数据
const queryForm = reactive<QueryForm>({
  startPeriod: dayjs('2025-01'),
  endPeriod: dayjs('2025-01'),
  showOnlyFirstLevel: false,
  showYearAccumulated: false,
});

// 表格列配置
const columns = [
  {
    title: '科目编码',
    dataIndex: 'subjectCode',
    key: 'subjectCode',
    width: 120,
    align: 'center' as const,
  },
  {
    title: '科目名称',
    dataIndex: 'subjectName',
    key: 'subjectName',
    width: 200,
    align: 'left' as const,
  },
  {
    title: '期初余额',
    children: [
      {
        title: '借方',
        dataIndex: 'openingDebit',
        key: 'openingDebit',
        width: 120,
        align: 'right' as const,
      },
      {
        title: '贷方',
        dataIndex: 'openingCredit',
        key: 'openingCredit',
        width: 120,
        align: 'right' as const,
      },
    ],
  },
  {
    title: '本期发生额',
    children: [
      {
        title: '借方',
        dataIndex: 'currentDebit',
        key: 'currentDebit',
        width: 120,
        align: 'right' as const,
      },
      {
        title: '贷方',
        dataIndex: 'currentCredit',
        key: 'currentCredit',
        width: 120,
        align: 'right' as const,
      },
    ],
  },
];

// 科目余额数据
const balanceData = ref<BalanceRecord[]>([
  {
    key: 'total',
    subjectCode: '',
    subjectName: '合计',
    openingDebit: 0,
    openingCredit: 0,
    currentDebit: 0,
    currentCredit: 0,
    isTotal: true,
  },
]);

// 格式化金额
const formatAmount = (amount: null | number): string => {
  if (amount === null || amount === 0) return '';
  return amount.toLocaleString('zh-CN', {
    minimumFractionDigits: 2,
    maximumFractionDigits: 2,
  });
};

// 事件处理函数
const handleBackToWorkspace = () => {
  // 返回工作台
};

const handleRefresh = () => {
  // 刷新页面
};

const handleQuantityAmount = () => {
  // 数量金额
};

const handleForeignCurrency = () => {
  // 外币金额
};

const handlePrint = () => {
  // 打印
};

const handleDownload = () => {
  // 下载
};
</script>

<template>
  <div class="h-full p-4">
    <!-- 页面顶部栏 -->
    <div class="mb-4 flex items-center justify-between">
      <!-- 左侧公司名称 -->
      <div class="text-lg font-medium text-gray-800">
        北京神州源科技有限公司
      </div>

      <!-- 中间面包屑 -->
      <div class="flex-1 px-4">
        <Breadcrumb>
          <BreadcrumbItem>账簿</BreadcrumbItem>
          <BreadcrumbItem>科目余额表</BreadcrumbItem>
        </Breadcrumb>
      </div>

      <!-- 右侧操作区 -->
      <div class="flex items-center space-x-2">
        <Button type="primary" @click="handleBackToWorkspace">
          返回工作台
        </Button>
        <Button type="text" @click="handleRefresh">
          <RefreshCw class="h-4 w-4" />
        </Button>
      </div>
    </div>

    <!-- 科目余额表核心功能区 -->
    <div class="rounded-lg bg-white p-6 shadow-sm">
      <!-- 查询筛选区 -->
      <div class="mb-6 space-y-4">
        <!-- 会计期间 -->
        <div class="flex items-center space-x-4">
          <span class="text-sm font-medium text-gray-700">会计期间：</span>
          <DatePicker
            v-model:value="queryForm.startPeriod"
            picker="month"
            placeholder="开始期间"
            class="w-32"
          />
          <span class="text-gray-500">至</span>
          <DatePicker
            v-model:value="queryForm.endPeriod"
            picker="month"
            placeholder="结束期间"
            class="w-32"
          />
        </div>

        <!-- 筛选开关和操作按钮 -->
        <div class="flex items-center justify-between">
          <div class="flex items-center space-x-6">
            <div class="flex items-center space-x-2">
              <Switch v-model:checked="queryForm.showOnlyFirstLevel" />
              <span class="text-sm text-gray-700">只显示一级科目</span>
            </div>
            <div class="flex items-center space-x-2">
              <Switch v-model:checked="queryForm.showYearAccumulated" />
              <span class="text-sm text-gray-700">显示本年累计</span>
            </div>
          </div>

          <div class="flex items-center space-x-2">
            <Button type="primary" @click="handleQuantityAmount">
              数量金额
            </Button>
            <Button type="primary" @click="handleForeignCurrency">
              外币金额
            </Button>
            <Button @click="handlePrint">
              <Printer class="mr-1 h-4 w-4" />
              打印
            </Button>
            <Button @click="handleDownload">
              <Download class="mr-1 h-4 w-4" />
              下载
            </Button>
          </div>
        </div>
      </div>

      <!-- 科目余额表格 -->
      <div class="overflow-x-auto">
        <Table
          :columns="columns"
          :data-source="balanceData"
          :pagination="false"
          size="small"
          bordered
          class="balance-sheet-table"
        >
          <template #bodyCell="{ column, record }">
            <template v-if="column.key === 'subjectCode'">
              <span :class="{ 'font-medium': record.isTotal }">
                {{ record.subjectCode }}
              </span>
            </template>
            <template v-else-if="column.key === 'subjectName'">
              <span :class="{ 'font-medium': record.isTotal }">
                {{ record.subjectName }}
              </span>
            </template>
            <template v-else-if="column.key === 'openingDebit'">
              <span :class="{ 'font-medium': record.isTotal }">
                {{ formatAmount(record.openingDebit) }}
              </span>
            </template>
            <template v-else-if="column.key === 'openingCredit'">
              <span :class="{ 'font-medium': record.isTotal }">
                {{ formatAmount(record.openingCredit) }}
              </span>
            </template>
            <template v-else-if="column.key === 'currentDebit'">
              <span :class="{ 'font-medium': record.isTotal }">
                {{ formatAmount(record.currentDebit) }}
              </span>
            </template>
            <template v-else-if="column.key === 'currentCredit'">
              <span :class="{ 'font-medium': record.isTotal }">
                {{ formatAmount(record.currentCredit) }}
              </span>
            </template>
          </template>
        </Table>
      </div>
    </div>
  </div>
</template>

<style scoped>
.balance-sheet-table :deep(.ant-table-tbody > tr.ant-table-row:last-child) {
  background-color: #f5f5f5;
  font-weight: 500;
}

.balance-sheet-table :deep(.ant-table-thead > tr > th) {
  background-color: #fafafa;
  font-weight: 500;
  text-align: center;
}

.balance-sheet-table :deep(.ant-table-tbody > tr > td) {
  padding: 8px 12px;
}
</style>